<template>
	<view class="hzIndex" >
		<view class="titleTop" >
			<!-- 惠民活动 -->
		</view>
		<view class="titleText" >
			惠民活动
		</view>
		<view class="tabBox" >
			<u-tabs :list="list1" lineColor="#13d7a2"  itemWidth="25%" @click="click"
			:activeStyle="{
			            color: '#13d7a2',
			           
			        }"></u-tabs>
		</view>
		<view class="yymz" v-if="yyItem == 0" v-html="mzSetting">
			
		</view>
		
		<view class="" style="overflow-y: auto;max-height: 1200rpx; padding-bottom: 100rpx;box-sizing: border-box;">
			<view class="yymz" v-if="yyItem == 1" style="line-height: 45rpx;" v-html="tjSetting">
				
				<u-popup :show="showPopup" @close="showPopup = false" :round="10">
					<view class="showPopupTitleText" >
						{{tjyyTitle}}
					</view>
				      <view class="popup-content" >
				        <u-form :model="form" ref="uForm" :rules="uFormRules">
							<u-form-item label="姓名" label-width="120" prop="name" borderBottom>
							  <u-input v-model="form.name" border="none"  placeholder="请输入姓名" />
							</u-form-item>
				          <u-form-item label="手机号" label-width="120" prop="phone" borderBottom>
				            <u-input v-model="form.phone" border="none" type="number" placeholder="请输入手机号" />
				          </u-form-item>
				          <u-form-item
				          	label="验证码"
				          	prop="msgCode"
				          	ref="item1"
							label-width="120" borderBottom>
				          		<u--input
				          			v-model="form.msgCode"
				          			placeholder="请输入验证码"
				          			border="none"
									type="number"
				          		>
				          		<template slot="suffix">
				          			<u-code
				          				ref="uCode"
				          				@change="codeChange"
				          				seconds="60"
				          				changeText="X秒重新获取"
				          			></u-code>
				          			<u-button
				          				@tap="getCode"
				          				:text="tips"
				          				style="background: none;color:#433f3f;border: 1px solid #433f3f;"
										:plain="true"
										
				          				></u-button>
				          		</template>
				          		</u--input>
				          </u-form-item>
				        </u-form>
						<view class="notes">
							备注：<br>
							提交预约后，我们将及时和您取得联系，提供必要的咨询和帮助。
						</view>
				        <button class="btn" style="color:#fff ;background-color: #45d5ae;" @click="submitSjh">提交</button>
				      </view>
				    </u-popup>
				
			</view>
			
			<view class="yymz" v-if="yyItem == 2" v-html="zySetting">
				
			</view>
			
			<view class="btnBox" v-if="yyItem == 0">
				<button class="btn" @click="submit(yyItem)" type="default">立即预约</button>
			</view>
			
			<view class="btnBox" v-if="yyItem == 2">
				<button class="btn" @click="submit(yyItem)" type="default">立即预约</button>
			</view>
			
			
			<view class="" v-if="yyItem == 3" style="margin-top: 20rpx;padding-bottom: 40rpx;">
				<view class="imageItem"  v-for="item in pushDocList" style="margin-bottom: 40rpx;">
					<view class="yytjTitle">
						{{item.docName}}
					</view>
					<image :src='item.avatar'  mode="aspectFit" @click="previewImage(item.avatar)"></image>
					<view class="btnTjBox">
						<button class="btn" @click="submit(yyItem,item.deptId,item.id)">立即预约</button>
					</view>
				</view>
			</view>
			
			<view class="" style="margin-top: 20rpx;padding-bottom: 40rpx;">
				<view class="imageItem" v-if="yyItem == 1" v-for="item in tjList" style="margin-bottom: 40rpx;">
					<view class="yytjTitle">
						{{item.title}}
					</view>
					<image :src='item.img'  mode="aspectFit" @click="previewImage(item.img)"></image>
					<view class="btnTjBox">
						<button class="btn" @click="yyTjEvent(item.id,item.title)">立即预约</button>
					</view>
				</view>
			</view>
			
			
			
			
			
			
			
		</view>
		
		
	</view>
    
	
</template>

<script>
	import {getTjPackList,setMsgTj,saveMarketBook,getPushDocList,getIndexSetting} from '@/api/login.js'
	export default {
		data() {
			return {
				tjyyTitle:'',
				tips: '',
				uFormRules:{
					'phone':[{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}],
					'msgCode':{
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
					'name':[{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}],
					
				},
				showPopup: false,
				form: {
				  phone: '',
				  msgCode: '',
				  name:'',
				  tjPackId:null,
				  tel:''
				},
				tjList:[],
				pushDocList:[],
                list1: [{
                    name: '预约门诊',
                }, {
                    name: '预约体检',
                }, {
                    name: '预约住院'
                }, {
                    name: '预约专家'
                }],
				yyItem:0,
				imageUrl: 'https://example.com/your-image.jpg', // 图片URL
				mzSetting:'',
				tjSetting:'',
				zySetting:''
			}
		},
		onLoad() {
			this.getTjPackListEvent();
			this.PushDocList();
			this.getSeting();
		},
		methods: {
			PushDocList(){
				uni.showLoading({
					title:'加载中...'
				})
				getPushDocList().then(res=>{
					uni.hideLoading()
					this.pushDocList = res.retData;
				})
			},
            click(item) {
				this.yyItem = item.index;
                console.log('item', item);
				
            },
			previewImage(url) {
			      uni.previewImage({
			        current: 0, // 当前显示图片的http链接索引，默认0
					
			        urls: [url] // 需要预览的图片http链接列表
			      });
			},
			getTjPackListEvent(){
				uni.showLoading({
					title:'加载中...'
				})
				getTjPackList().then(res=>{
					uni.hideLoading()
					this.tjList = res.retData;
				})
			},
			yyTjEvent(id,title){
				this.showPopup = true;
				this.form.tjPackId = id;
				console.log(id,"====");
				this.tjyyTitle = title;
			},
			yyPushDocEvent(id,title){
				this.showPushDocPopup = true;
				this.form.tjPackId = id;
				console.log(id,"====");
				this.yyPushDocTitle = title;
			},
			
			//查询配置
			getSeting(){
				getIndexSetting().then(res=>{
					this.mzSetting = res.retData.mzSetting;
					this.tjSetting = res.retData.tjSetting;
					this.zySetting = res.retData.zySetting;
					console.log(res,"==============查询配置");
				})
			},
			
			
			getCode() {
				const phone = this.form.phone;
					if(uni.$u.test.mobile(phone)){
						if (this.$refs.uCode.canGetCode) {
							// 模拟向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码'
							})
							setMsgTj({phone:phone}).then(res=>{
								uni.hideLoading();
								console.log(res,"==============");
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast(res.retMsg);
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
									 
							})
						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					}else{
						uni.$u.toast('请输入正确的手机号');
					}
			},
			codeChange(text) {
			    this.tips = text;
			},
			submitSjh() {
				this.$refs.uForm.validate()
				  .then(valid => {
					if (valid) {
					  console.log('表单验证通过，提交数据', this.form);
					  this.form.tel = this.form.phone;
					  saveMarketBook(this.form).then(res=>{
						 if(res.retCode == 'SUCCESS'){
							 uni.showToast({
							 		title: '预约登记成功，我们将及时和您联系！',
							 		icon: 'none'
							 });
							this.showPopup = false;
						 }else{
							 uni.showToast({
							 	title: res.retMsg,
							 	icon: 'none'
							 });
						 }
					  })
					 
					  // 这里应该是提交表单的请求逻辑
					} else {
					  console.log('表单验证失败');
					  return false;
					}
				  });
			  },
			submit(index,deptID,id){
				
				if(index == 0){
					uni.navigateTo({
						url:'/pages/regularActivity/hzReserveMz/hzReserveMz'
					})
				}if(index == 2){
					uni.navigateTo({
						url:'/pages/regularActivity/hzReserveZy/hzReserveZy'
					})
				}if(index == 3){
					uni.navigateTo({
						url:'/pages/regularActivity/hzReserveMz/hzReserveMz?id='+id+'&deptId='+deptID+'&index='+index
					})
				}      
			}
		}
	}
</script>
<style>
	.notes{
		color: #403f3fe6;
		line-height: 2;
		font-size: 30upx;
		margin: 10rpx 0px;
	}
	page {
		background-color: #89d2be;
	  /* background: url('/hd/static/img/index_bg.png') repeat-y center; */
	  overflow: hidden !important;
	  height: 100%;
	  
	}
	@media (max-width: 600px) {
	  page {
	    background-size: 100% auto; /* 在小屏幕设备上调整背景图 */
		background-position: center; /* 背景图居中显示 */
	  }
	}
	.titleTop{
		width: 100%;
		height: 100rpx;
		/* background: url('/hd/static/img/indexBg_top.png') no-repeat center; */
		background-size: 100% 100%; /* 在小屏幕设备上调整背景图 */
	}
	.showPopupTitleText{
		padding: 20rpx 0px 20rpx 0rpx;
		box-sizing: border-box;
		background: #fff;
			font-weight: bold;
			letter-spacing: 6rpx !important;
			font-size: 36rpx !important;
			font-style: italic;
			/* box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16); */
			text-shadow: 2px 2px 2px #333;
			overflow: hidden;
			text-align: center;
	}
	.titleText{
		padding: 0rpx 0px 50rpx 0rpx;
		box-sizing: border-box;
		color: #fffbde;
			font-weight: bold;
			letter-spacing: 6rpx !important;
			font-size: 36rpx !important;
			font-style: italic;
			/* box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16); */
			text-shadow: 2px 2px 2px #333;
			overflow: hidden;
			text-align: center;
		
	}
	::v-deep .u-tabs__wrapper__nav[data-v-48634e29]{
		padding: 0px 20px;
		box-sizing: border-box;
	}
	::v-deep .u-tabs__wrapper__nav__item[data-v-48634e29]{
		background-color: #fff !important;
	}
	/* 线上 */
	::v-deep .u-tabs__wrapper__nav__item__text[data-v-687bf5e7] {
		padding: 20rpx;
		background: #fff;
		/* background: url('/hd/static/img/tabBtn_bg.png') no-repeat center; */
		background-size: cover; 
		background-position: center; 
		font-weight: bold;
	}
	/* ::v-deep .u-tabs__wrapper__nav__item__text[data-v-48634e29] {
		padding: 20rpx;
		background: url('/static/img/tabBtn_bg.png') no-repeat center;
		background-size: cover; 
		background-position: center; 
		font-weight: bold;
	} */
	::v-deep .tabBox[data-v-069e6bc6]{
		background-color: none !important;
	}
	
	::v-deep .u-tabs__wrapper__nav__item{
	    flex: 1 1 0% !important;
	}
	.popup-content {
	  padding: 20px;
	}
	.yytjBtn{
		width: 290upx;
		height: 80upx;
		font-size: 34upx !important;
		color: #fff;
		  /*background-color: $base-color;*/
		border-radius: 10upx;
		  /*box-shadow: 1px 2px 5px #5088fd;*/
		background: linear-gradient(90deg, #5088FD 0%, #62B9F9 100%);
		margin-bottom: 50upx;
		margin-top: 20upx;
	}
	.tabBox{
		width: 100%;
		height: 80upx;
		
		/* position: fixed; */
		z-index: 100;
	}
	
	.yytjTitle{
		width: 100%;
		text-align: center;
		font-weight: bold;
		color: #fffbde;
		font-size: 35rpx;
		margin-bottom: 20upx;
	}
	.imageItem{
		width: 100%;
		text-align: center;
	}
	.yymz{
		padding: 20rpx;
		box-sizing: border-box;
		line-height: 80rpx;
		color:#13d7a2 ;
		font-size: 30rpx;
		background-color: #fff;
		/* border: 4rpx solid #facf9b; */
		border-radius: 16rpx;
		margin: 40rpx 20rpx 0rpx 20rpx;
		/* max-height: 600rpx;
		overflow-y: auto; */
	}
	.btnTjBox{
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		justify-content: center;
	}
	.btnBox{
		width: 100%;
		position: fixed;
		bottom: 100rpx;
		height: 100upx;
		display: flex;
		align-items: center;
		
		justify-content: center;
		/* padding-bottom: 50upx; */
	}
	
		
		
	
	.btn{
		padding-top: 5rpx;
		border-bottom-left-radius: 12rpx;
		color: #89d2be;
		font-weight: bold;
		letter-spacing: 6rpx !important;
		padding-left: 30rpx;
		font-size: 28rpx !important;
		padding-bottom: 5rpx;
		border-top-right-radius: 12rpx;
		background-color: #fff;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		border-top-left-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		text-align: center;
		padding-right: 30rpx;
		
	}
	::v-deep .popup-content{
		background-color: #fff;
	}
	::v-deep .uni-input-placeholder{
		color: #6a6a6a !important;
	}
</style>
